<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/js.cookie.js"></script>
    <script>
        var data=[
            {id:1,name:"老八秘制小汉堡",price:500},
            {id:2,name:"'吃个桃桃'牌桃子",price:10},
            {id:3,name:"猕猴~桃儿~~",price:50},
            {id:4,name:"爱国者导弹",price:70000},
            {id:5,name:"凤凰牌自行车",price:129},
            {id:6,name:"吹风机",price:46},
            {id:7,name:"洗发水",price:52},
            {id:8,name:"'焦'皂",price:199},
            {id:9,name:"红内裤",price:26},
            {id:10,name:"给小日子来一巴掌",price:1},
        ]
    </script>

    <style>
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        li{list-style: none;}
        body{
            height: 1500px;
        }
        ul li{
            width: 400px;
            height: 50px;
            line-height: 50px;
            border: 2px solid #000;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            background-color: beige;
        }
        li span{
            font-size: 14px;
            color: tan;
        }
        li a{
            color: skyblue;
        }
        .car{
            height: 50px;
            width: 100px;
            background: beige;
            display: block;
            text-align: center;
            line-height: 50px;
            color: silver;
        }
    </style>

</head>
<body>
<ul id="list"></ul>


    <a href="./car.html" class="car">购物车</a>
    <script>
        var oList=document.querySelector("#list");
        var str=``;
        
        // 把数据添加到ul标签中,在document上显示
        data.forEach(function(item,index){
            str+=`
                <li>
                    <span>
                        编号:${item.id}
                    </span>
                    <span>
                        名称:${item.name}
                    </span>
                    <span>
                        价格:${item.price}
                    </span>
                    <a data-id=${item.id} href="javascript:void(0)">加入购物车</a>
                </li>
            `
        })
        // 显示
        oList.innerHTML=str;


        oList.addEventListener("click",function(evt){
            var e=evt||window,event;
            var ele=e.target||e.srcElement;
            // 判断点击的是否为a标签
            if(ele.nodeName!='A'){
                return;
            }

            // 通过id找到选中的商品
            var id=ele.getAttribute("data-id");
            var current=data.filter(function(item,index){
                return item.id==id;
            })[0];

            // 把硬盘上数据读取到内存中
            var oCarts=JSON.parse(Cookies.get("carts")||'[]');
            var tf=false;//没购买
            // 将cookie里的数据与选出来的数据比较
            for(var i=0;i<oCarts.length;i++){
                if(oCarts[i].id==current.id){
                    oCarts[i].number=Number(oCarts[i].number)+1;
                    tf=true;//购买了
                    break;
                }
            }
            // 没购买过的加入到内存中,数量加1
            if(!(tf)){
                current.number=1;
                oCarts.push(current);
            }

            // 把cookie中的数据保存到硬盘中
            Cookies.set("carts",oCarts,{espires:10});
            alert("添加到购物车成功!");
        })
    </script>
</body>
</html>